<template>
  <div class="wrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>营销活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content"
      ref="wrap">
      <el-form :inline="true">
        <el-form-item>
          <el-dropdown @command="setType">
            <span class="el-dropdown-link">
              {{typeStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{title:'全部类型',id:''}">全部类型</el-dropdown-item>
              <el-dropdown-item :command="{title:'开卡有礼',id:'1'}">开卡有礼</el-dropdown-item>
              <el-dropdown-item :command="{title:'升级有礼',id:'2'}">升级有礼</el-dropdown-item>
              <el-dropdown-item :command="{title:'消费有礼',id:'3'}">消费有礼</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setSate">
            <span class="el-dropdown-link">
              {{stateStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{title:'全部状态',id:''}">全部状态</el-dropdown-item>
              <el-dropdown-item :command="{title:'未开始',id:'1'}">未开始</el-dropdown-item>
              <el-dropdown-item :command="{title:'进行中',id:'2'}">进行中</el-dropdown-item>
              <el-dropdown-item :command="{title:'已结束',id:'3'}">已结束</el-dropdown-item>
                <el-dropdown-item :command="{title:'已失效',id:'5'}">已失效</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入活动名称"
            v-model="searchKey"
            clearable
            style="width:300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            size="small"
            style="width:60px;"
            @click="search">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="primary"
            size="small"
            @click="add">新增活动</el-button>
        </el-form-item>
        <el-form-item>
          <el-table :data="manageList">
            <el-table-column label="活动名称"
              prop="name">

            </el-table-column>
            <el-table-column label="活动类型"
              prop="typeName">

            </el-table-column>
            <el-table-column label="活动时间"
              prop="activityTime">

            </el-table-column>
            <el-table-column label="创建时间"
              prop="createTime">

            </el-table-column>
            <el-table-column label="创建人"
              prop="userName">

            </el-table-column>
            <el-table-column label="状态"
              prop="stateName">

            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text"
                  v-if="scope.row.state==1"
                  @click="edit(scope.row)">修改</el-button>
                <el-button type="text"
                   @click="look(scope.row)">查看</el-button>
                <el-button type="text"
                  v-if="scope.row.state==1  || scope.row.state==3 || scope.row.state==5"
                  @click="_delete(scope.row.id)">删除</el-button>
                <el-button type="text"
                  v-if="scope.row.state==2"
                  @click="updateState(scope.row)">结束</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="fr">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getMarketingList, updateActiveState } from "@/public/js/member";
export default {
  components: {},
  props: {},
  data() {
    return {
      typeStr: "活动类型",
      stateStr: "活动状态",
      type: "",
      state: "",
      searchKey: "",
      pageNo: 1,
      pageSize: 10,
      total: 0,
      manageList: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    //获取列表数据
    _getMarketingList() {
      getMarketingList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: this.type,
        state: this.state,
        search: this.searchKey
      }).then(res => {
        console.log(res);
        this.manageList = res.data.manageList;
        this.total = res.data.total;
      });
    },
    _restFetch() {
      this.pageNo = 1;
      this.pageSize = 10;
      this._getMarketingList();
    },
    //关键字查询
    search() {
      this._restFetch();
    },
    //设置类型
    setType(val) {
      this.typeStr = val.title;
      this.type = val.id;
      this._restFetch();
    },
    // 设置状态
    setSate(val) {
      this.stateStr = val.title;
      this.state = val.id;
      this._restFetch();
    },
    add() {
      this.$router.push("/index/acivityAdd");
    },
    //编辑
    edit(item) {
      let { id, type } = item;
      this.$router.push("/index/activeAddEdit?type=" + type + "&id=" + id);
    },
    //查看
    look(item){
      let { id, type } = item;
      this.$router.push("/index/activeAddEdit?type=" + type + "&id=" + id+'&view=1');
    },
    //修改状态
    updateState(val) {
      let state = val.state == 1 ? 4 : 3;
      let id =  val.id;
      if(val.state ==3) {
        state = 4;
      }
      this.$confirm("是否继续此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        updateActiveState({
          id: id,
          state
        }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this._getMarketingList();
          }
        });
      });
    },
    _delete(id){
       this.$confirm("是否继续此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        updateActiveState({
          id: id,
          state:4
        }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this._getMarketingList();
          }
        });
      });
    },
    //fenye
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getMarketingList();
    },
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this._getMarketingList();
    }
  },
  created() {
    this._getMarketingList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>